<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">


<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />
<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />


<script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>


<body>
    <div id="calendar" style="height: 500px"></div>
    <script>
        /* var calendar = new tui.Calendar('#calendar', {
            usageStatistics: false,
            defaultView: 'month',
            taskView: true,
            useCreationPopup: true,
            useDetailPopup: true,
            template: {
            monthDayname: function(dayname) {
                return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
                }
            }
        }); */
        var calendar = new tui.Calendar('#calendar', {
            template: {
                milestone: function(schedule) {
                    return '<span style="color:red;"><i class="fa fa-flag"></i> ' + schedule.title + '</span>';
                },
                milestoneTitle: function() {
                    return 'Milestone';
                },
                task: function(schedule) {
                    return '&nbsp;&nbsp;#' + schedule.title;
                },
                taskTitle: function() {
                    return '<label><input type="checkbox" />Task</label>';
                },
                allday: function(schedule) {
                    return schedule.title + ' <i class="fa fa-refresh"></i>';
                },
                alldayTitle: function() {
                    return 'All Day';
                },
                time: function(schedule) {
                    return schedule.title + ' <i class="fa fa-refresh"></i>' + schedule.start;
                },
                monthMoreTitleDate: function(date) {
                    date = new Date(date);
                    return tui.util.formatDate('MM-DD', date) + '(' + daynames[date.getDay()] + ')';
                },
                monthMoreClose: function() {
                    return '<i class="fa fa-close"></i>';
                },
                // monthGridHeader: function(model) {
                //     var date = parseInt(model.date.split('-')[2], 10);
                //     var classNames = [];

                //     classNames.push(config.classname('weekday-grid-date'));
                //     if (model.isToday) {
                //         classNames.push(config.classname('weekday-grid-date-decorator'));
                //     }

                //     return '<span class="' + classNames.join(' ') + '">' + date + '</span>';
                // },
                monthGridHeaderExceed: function(hiddenSchedules) {
                    return '<span class="calendar-more-schedules">+' + hiddenSchedules + '</span>';
                },

                monthGridFooter: function() {
                    return '<div class="calendar-new-schedule-button">New Schedule</div>';
                },

                monthGridFooterExceed: function(hiddenSchedules) {
                    return '<span class="calendar-footer-more-schedules">+ See ' + hiddenSchedules + ' more events</span>';
                },
                weekDayname: function(dayname) {
                    return '<span class="calendar-week-dayname-name">' + dayname.dayName + '</span><br><span class="calendar-week-dayname-date">' + dayname.date + '</span>';
                },
                monthDayname: function(dayname) {
                    return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
                },
                timegridDisplayPrimaryTime: function(time) {
                    var meridiem = time.hour < 12 ? 'am' : 'pm';

                    return time.hour + ' ' + meridiem;
                },
                timegridDisplayTime: function(time) {
                    return time.hour + ':' + time.minutes;
                },
                goingDuration: function(model) {
                    var goingDuration = model.goingDuration;
                    var hour = parseInt(goingDuration / SIXTY_MINUTES, 10);
                    var minutes = goingDuration % SIXTY_MINUTES;

                    return 'GoingTime ' + hour + ':' + minutes;
                },
                comingDuration: function(model) {
                    var goingDuration = model.goingDuration;
                    var hour = parseInt(goingDuration / SIXTY_MINUTES, 10);
                    var minutes = goingDuration % SIXTY_MINUTES;

                    return 'ComingTime ' + hour + ':' + minutes;
                },
                popupDetailRepeat: function(model) {
                    return model.recurrenceRule;
                },
                popupDetailBody: function(model) {
                    return model.body;
                }
            }
        });
        /* calendar.createSchedules([
            {
                id: '1',
                calendarId: '1',
                title: 'my schedule',
                body: 'body',
                category: 'time',
                dueDateClass: '',
                start: new Date('2021-05-19T09:00:00'),
                end: new Date('2021-05-19T11:00:00'),
                isReadOnly: true    // schedule is read-only
            },
            {
                id: '2',
                calendarId: '1',
                title: 'second schedule',
                body: 'body',
                category: 'time',
                dueDateClass: '',
                start: new Date('2021-05-20T13:00:00'),
                end: new Date('2021-05-20T14:00:00'),
                isReadOnly: true    // schedule is read-only
            }
        ]) */
        calendar.on('beforeCreateSchedule', function(event) {
            var startTime = event.start;
            var endTime = event.end;
            var isAllDay = event.isAllDay;
            var guide = event.guide;
            var triggerEventName = event.triggerEventName;
            var schedule;

            if (triggerEventName === 'click') {
                // open writing simple schedule popup
                schedule = {};
            } else if (triggerEventName === 'dblclick') {
                // open writing detail schedule popup
                schedule = {};
            }

            calendar.createSchedules([schedule]);
        });
        // daily view
        calendar.changeView('day', true);

        // weekly view
        calendar.changeView('week', true);

        // monthly view with 5 weeks or 6 weeks based on the month
        calendar.setOptions({month: {isAlways6Week: false}}, true);
        calendar.changeView('month', true);

        // monthly view(default 6 weeks view)
        calendar.setOptions({month: {visibleWeeksCount: 6}}, true); // or null
        calendar.changeView('month', true);

        // 2 weeks monthly view
        calendar.setOptions({month: {visibleWeeksCount: 2}}, true);
        calendar.changeView('month', true);

        // 3 weeks monthly view
        calendar.setOptions({month: {visibleWeeksCount: 3}}, true);
        calendar.changeView('month', true);

        // narrow weekend
        calendar.setOptions({month: {narrowWeekend: true}}, true);
        calendar.setOptions({week: {narrowWeekend: true}}, true);
        calendar.changeView(calendar.getViewName(), true);

        // change start day of week(from monday)
        calendar.setOptions({week: {startDayOfWeek: 1}}, true);
        calendar.setOptions({month: {startDayOfWeek: 1}}, true);
        calendar.changeView(calendar.getViewName(), true);

        // work week
        calendar.setOptions({week: {workweek: true}}, true);
        calendar.setOptions({month: {workweek: true}}, true);
        calendar.changeView(calendar.getViewName(), true);
    </script>
</body>